<template>
  <div class="home">
    <div class="bigbox">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <router-link to="/switch"
            ><img to="/switch" src="../assets/image/18695.png"
          /></router-link>
        </div>
        <div class="h-title">熊猫看书</div>
        <div class="h-right">
          <router-link to="/personal">书架</router-link>

          <router-link to="/search" class="h-search"></router-link>
        </div>
      </header>
      <!-- 头部导航栏 -->
      <nav>
        <ul>
          <li class="active">
            <router-link to="/home">首页</router-link>
          </li>
          <li>
            <router-link to="/leader">排行</router-link>
          </li>
          <li>
            <router-link to="/classify">分类</router-link>
          </li>
          <li>
            <router-link to="/schoolboy">男生</router-link>
          </li>
          <li>
            <router-link to="/schoolgirl">女生</router-link>
          </li>
        </ul>
      </nav>
      <!-- 轮播图 -->
      <bannerimg></bannerimg>
      <!-- 底部导航栏 -->
      <!-- 组件 -->
      <bottomnav></bottomnav>

      <!-- 重磅推荐 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">重磅推荐</div>
        <!-- 组件 -->
        <bothsexes></bothsexes>
        <!-- classify -->
        <router-link to="/classify" tag="div" class="more-title"
          >更多重磅推荐<i></i
        ></router-link>
        <!-- <div class="more-title">更多重磅推荐</div> -->
      </div>
      <!-- 中间搜索框 -->

      <!-- 潜力新书 -->
      <div class="box2">
        <div class="all-title">潜力新书</div>
        <threefigures></threefigures>
        <div class="line">
          <hr size="2" color="#efefef" />
        </div>
        <router-link to="/newbook" tag="div" class="more-title"
          >进入新书专区<i></i
        ></router-link>
      </div>
      <!-- 男生小说 -->
      <div class="box3" style="margin-top: 10px">
        <div class="all-title">男生小说</div>
        <moregender></moregender>

        <router-link to="/schoolboy" tag="div" class="more-title"
          >更多男生小说<i></i
        ></router-link>
      </div>
      <!-- 女生小说 -->
      <div class="box4" style="margin-top: 10px">
        <div class="all-title">女生小说</div>
        <moregender></moregender>
        <router-link to="/schoolgirl" tag="div" class="more-title"
          >更多女生小说<i></i
        ></router-link>
      </div>
      <!-- 包月精品 -->
      <div class="box5" style="margin-top: 10px">
        <div class="all-title">包月精品</div>
        <threefigures></threefigures>
        <div class="line">
          <hr size="2" color="#efefef" />
        </div>
        <router-link to="/monthly" tag="div" class="more-title"
          >更多包月精品<i></i
        ></router-link>
      </div>
      <!-- 排行榜组件 -->
      <ranking></ranking>
      <!-- 页脚搜索框 -->
      <router-link to="/search">
        <div class="m-search">
          <!-- 输入框 -->
          <div class="inp">
            <input type="text" placeholder="作者名/书名" />
          </div>
          <!-- 放大镜 -->
          <div class="magnifier"></div>
        </div>
      </router-link>
      <!-- 页脚 -->
      <footermodule></footermodule>
    </div>
  </div>
</template>

<script>

import bottomnav from "../components/NavigationBar/BottomNav.vue";
import ranking from "../components/RankIng.vue";
import bannerimg from "../components/BannerImg.vue";
import bothsexes from "../components/BothSexes.vue";
import threefigures from "../components/ThreeFigures.vue";
import moregender from "../components/MoreGender.vue";
import footermodule from "../components/FooterModule.vue";
export default {
  
  components: {
    bottomnav,
    bannerimg,
    ranking,
    bothsexes,
    threefigures,
    moregender,
    footermodule,
    // typelist
  },
};
</script>

<style lang="scss" scoped>

.banner {
  overflow: hidden;
  width: 100%;
  height: 113px;
  position: relative;
  ul {
    li {
      width: 100%;
      height: 113px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0px 0px 10px 10px;
      }
    }
  }
  .custom-indicator {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    ol {
      display: inline-block;
      margin: 0 auto;
      position: absolute;
      // bottom: -24px;
      width: 25px;

      li {
        display: inline-block;
        width: 4px;
        height: 5px;
        margin: 0px 4px;
        background-color: #75787e;
        border-radius: 50%;
        &.con {
          background-color: #cfd2d8;
        }
      }
    }
  }
}

.my-swipe .van-swipe-item {
  float: left;
  color: #fff;
  font-size: 20px;
  line-height: 113px;
  text-align: center;
}
</style>